<template>
	<view class="box">
		<u-popup v-model="show" mode="center" width="678rpx">
			<view class="shows">
				<view class="msg">
					请绑定支付宝
				</view>
				<view class="" style="padding: 0 40rpx;">
					<u-form :model="form" ref="uForm">

						<u-form-item label="姓名" label-width="180rpx"><u-input v-model="name"
								placeholder="请输入姓名" /></u-form-item>
						<u-form-item label="支付宝帐号" label-width="180rpx"><u-input v-model="cont"
								placeholder="请输入支付宝帐号" /></u-form-item>

					</u-form>

				</view>

				<view class="bangding d_f a_i_c j_c_c" @click="bings">
					绑定
				</view>
			</view>


		</u-popup>
		<view class="" style="text-align: right;width: 100%;padding: 40rpx;" @click="jilu">
			提现记录
		</view>
		<view class="top">
			<view class="d_f a_i_c j_c_c jine">
				可提现总金额
			</view>
			<view class="d_f a_i_c j_c_c money">
				{{moneyxs}}
			</view>
		</view>
<view class="d_f j_c_s_b a_i_c" v-if="bind==true" style="padding-right: 40rpx;">
		<view class="d_f a_i_c "  style="font-size: 20rpx;margin-top: 27rpx;">
			<image src="https://web.78keji.cn/images/ysh/no.png" mode="widthFix"
				style="width: 146rpx;margin-left: 52rpx" ></image>
				<view class="" style="margin-left: 50rpx;">
					{{mobile}}
				</view>
				<view class="" style="margin-left: 10rpx;">
					{{alipayname}}
				</view>
				<view class="tx d_f a_i_c j_c_c" @click="bd">
					重新绑定
				</view>
		</view>
		
			
		</view>
		<image src="https://web.78keji.cn/images/ysh/yes.png" mode="widthFix"
			style="width: 146rpx;margin-left: 52rpx;margin-top: 27rpx;" v-else></image>

		<view class="colu">
			<view v-for="(item,index) in money" :key="index"
				style="width:192rpx;border-radius: 11rpx;margin-top: 30rpx;height: 68rpx;border: 1px solid #C4C4C4;font-size: 20rpx;"
				@click="check(item)"
				:class="item.check==true ? 'd_f j_c_c a_i_c f_c_c checks' : 'd_f j_c_c a_i_c f_c_c'">

				<view class="" v-if="item.new!=''" style="position: absolute;">

					<view class="t_a_c"  v-if="item.check==true">
						{{item.old}}元
					</view>
					<view class="t_a_c" style="color: #666666;" v-else>
						{{item.old}}元
					</view>

				</view>
				<view class="" style="text-align: center;height: 68rpx;position: absolute;color:#333333;width:192rpx;border: 1px solid #C4C4C4;padding-top: 4rpx;padding-left: 6rpx;border-radius: 11rpx;" v-else>
					<u-input v-model="zdy" @input='inputs' placeholder="更多面额" type="digit" :height='height' @focus="onFocus" :maxlength="moneyMaxLeng" />
				</view>


			</view>

		</view>

		<view class="btons d_f j_c_c a_i_c" v-if="bind==true" @click="tx">
			发起提现
		</view>
		<view class="bton d_f j_c_c a_i_c" v-else @click="bd">
			绑定支付宝
		</view>
	</view>
</template>

<script>
	import {
		sendSms,
		checkSms,
		ljjList,
		wxLogins,
		ljjLq,
		getProType,
		openSignDecrypt,
		ljjStatusEdit,
		jyqList,
		jyqStatusEdit,
		getAliUser,
		decodeQrcode
	} from '../../api/index.js'
	import moment from '../../utils/moment.js'
	import md5 from '../../utils/md5.js'
	export default {
		data() {
			return {
				alipayname:'',
				mobile:"",
				moneyxs:'',
				height:35,
				data: {},
				name: '',
				cont: '',
				bind: false,
				show: false,
				moneydata:"",
				zdy:"",
				money: [{
						old: 10,
						new: 25,
						check: false,
						id: 1
					},
					{
						old: 50,
						new: 45,
						check: false,
						id: 2
					},
					{
						old: 100,
						new: 95,
						check: false,
						id: 3
					},

					{
						old: 500,
						new: 195,
						check: false,
						id: 4
					},
					{
						old: 1000,
						new: 295,
						check: false,
						id: 5
					},
					{
						old: "",
						new: "",
						check: false,
						id: 6
					}
				],
				moneyMaxLeng:'',

			}
		},
		components: {

		},
		methods: {
			jilu(){
				uni.navigateTo({
					url:'/pages/jilu/jilu'
				})
			},
			inputs(e){
		
		
			this.$nextTick(() => {
			   this.zdy=e.replace(/^\D*((\d){0,4}(?:\.\d{0,2})?).*$/g, '$1')
			       });
	

			},
			bings (){
				uni.request({
					url: 'https://tcapi.sx2b2c.com/api/client_api/bindAlipayAccount', // 你的API地址
					method: 'POST',
					data: {
						alipay_name: this.name,
						alipay_account: this.cont
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded', // 默认值
						token: uni.getStorageSync('token'),
					},

					success: (res) => {
						console.log(res)
						if(res.data.code==1){
							uni.showToast({
								icon: 'none',
								title: '绑定成功',
								duration: 2000
							});
							this.show=false
							this.bind=true
							this.getdata()
						}else{
							uni.showToast({
								icon: 'none',
								title:res.data.msg,
								duration: 2000
							});
						}
					},
					fail: (err) => {
						console.error('POST请求失败', err);
					}
				});

			},
			bd() {
this.show=true
			},
			getdata(){
				uni.request({
					url: 'https://tcapi.sx2b2c.com/api/client_api/getUserInfo', // 你的API地址
					method: 'POST',
				
					header: {
						'content-type': 'application/x-www-form-urlencoded', // 默认值
						token: uni.getStorageSync('token'),
					},
				
					success: (res) => {
						console.log('POST请求成功', res);
						this.data = res.data.data
						this.moneyxs=res.data.data.money
						this.mobile=res.data.data.alipayaccount
						this.alipayname=res.data.data.alipayname
						if (res.data.data.alipayaccount != '') {
							this.bind = true
						} else {
							this.bind = false
						}
					},
					fail: (err) => {
						console.error('POST请求失败', err);
					}
				});
			},
			tx(){
				if(this.zdy==''&&this.moneydata==''){
					uni.showToast({
						icon: 'none',
						title: '请选择金额',
						duration: 2000
					});
				}else{
					if(this.zdy==''){
						my.showLoading({
						  content: '申请提现中...',
						  success: function(res) {
						    console.log(res);
						 
						  },
						  fail: function(err) {
						    console.log(err);
						  }
						});
						uni.request({
							url: 'https://tcapi.sx2b2c.com/api/client_api/withdrawDeposit', // 你的API地址
							method: 'POST',
						data: {
							money:this.moneydata,
							
						},
							header: {
								'content-type': 'application/x-www-form-urlencoded', // 默认值
								token: uni.getStorageSync('token'),
							},
						
							success: (res) => {
								console.log('POST请求成功', res);
							
							if(res.data.code==1){
								my.hideLoading()
								uni.showToast({
									icon: 'none',
									title:'成功',
									duration: 2000
								});
								this.getdata()
							}else{
								my.hideLoading()
								uni.showToast({
									icon: 'none',
									title: res.data.msg,
									duration: 2000
								});
							}
							
							},
							fail: (err) => {
								my.hideLoading()
								console.error('POST请求失败', err);
							}
						});
					}else{
						my.showLoading({
						  content: '申请提现中...',
						  success: function(res) {
						    console.log(res);
						 
						  },
						  fail: function(err) {
						    console.log(err);
						  }
						});
						uni.request({
							url: 'https://tcapi.sx2b2c.com/api/client_api/withdrawDeposit', // 你的API地址
							method: 'POST',
						data: {
							money:this.zdy,
							
						},
							header: {
								'content-type': 'application/x-www-form-urlencoded', // 默认值
								token: uni.getStorageSync('token'),
							},
						
							success: (res) => {
								console.log(res)
							if(res.data.code==1){
								my.hideLoading()
								this.getdata()
								uni.showToast({
									icon: 'none',
									title:'成功',
									duration: 2000
								});
							}else{
								my.hideLoading()
								uni.showToast({
									icon: 'none',
									title: res.data.msg,
									duration: 2000
								});
							}
							
							},
							fail: (err) => {
								my.hideLoading()
								console.error('POST请求失败', err);
							}
						});
					}
				}
			},
			onFocus(){
				for (var i in this.money) {
				
						this.money[i].check = false
						this.moneydata=''
					
				}
			},
			check(e) {
this.zdy=''
				for (var i in this.money) {
					if (this.money[i].id == e.id) {
						this.money[i].check = !this.money[i].check
						this.moneydata=this.money[i].old
					} else {
						this.money[i].check = false
					}
				}
				// console.log(this.money)

			},

		},
		onLoad(option) {

	this.getdata()

		},
		watch: {

		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	.tx {
		background-color: #FC4006;
		width: 141rpx;
		height: 42rpx;
		box-shadow: -1rpx 3rpx 3rpx 0rpx rgba(246, 134, 98, 0.61);
		border-radius: 21rpx;
		color: white;
margin-left: 100rpx;
		color: #FEFEFE;
		font-size: 24rpx;
		
	}
	.top {
		width: 673rpx;
		height: 178rpx;
		background: linear-gradient(229deg, #F28B6F 0%, #FC3B06 67%);
		box-shadow: 3rpx 5rpx 9rpx 0rpx rgba(243, 101, 49, 0.45);
		border-radius: 13rpx;
		opacity: 0.77;
		margin: 0 auto;
	}

	.jine {
		padding-top: 42rpx;
		font-weight: normal;
		font-size: 19rpx;
		color: #FFFFFF;
	}

	.money {

		font-weight: normal;
		font-size: 47rpx;
		color: #FFFFFF;
		padding-top: 32rpx;
	}

	.moneys {
		padding: 24rpx 40rpx;
	}

	.checks {
		border: 1px solid #2881FD;
color: #FF5907;
		background-color: #FFDFDF !important;
	}

	.colu {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 24rpx 40rpx;
	}

	.bton {
		width: 669rpx;
		height: 79rpx;
		background: #01A9F0;
		border-radius: 14rpx 15rpx 14rpx 14rpx;
		margin: 0 auto;
		color: white;
		font-size: 32rpx;
	}

	.btons {
		width: 669rpx;
		height: 79rpx;
		background: #01A9F0;
		border-radius: 14rpx 15rpx 14rpx 14rpx;
		margin: 0 auto;
		color: white;
		font-size: 32rpx;
	}

	.shows {

		height: 467rpx;
		background: white;
		border-radius: 24rpx;
	}

	.msg {
		width: 100%;
		height: 104rpx;

		border-radius: 11rpx 11rpx 0rpx 0rpx;
		font-size: 38rpx;

		color: #0A0301;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bangding {
		width: 595rpx;
		height: 81rpx;
		background: #01A9F0;
		border-radius: 40rpx;
		color: white;
		font-size: 32rpx;
		font-weight: 600;
		margin: 0 auto;
	}
	.custom-input {
	  height: 50px;
	  line-height: 50px;
	}
</style>